<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>停车场用户查询</title>
    <base href="<%=basePath%>/" />
    
   	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"; /><!-- IE的渲染模式 -->
    <meta name="renderer" content="webkit" /><!-- 浏览器高速模式 -->
    
    <meta name="keywords" content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="description" content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="author" content="blackshadowwalker" />
    
	<link href="css/common.css" rel="stylesheet" />

	<script src="scripts/jquery/jquery-1.7.min.js"></script>
	<script src="bootstrap/3.2/js/bootstrap.min.js"></script>
	<link href="bootstrap/3.2/css/bootstrap.css" rel="stylesheet"/>
	
	<script src="scripts/jquery/tableSorter/scripts/JQueryPlugin/TableSort.js?t=f234324" type="text/javascript"></script>
	
	<script src="plugins/HubSpotMessager/build/js/messenger.js"></script>
	<script src="index/js/index.js?t=4327428949" type="text/javascript"></script>
	
	<script type="text/javascript">
		var msg = "${msg}";
		if(msg!="")
			alert(msg);
	
		function del(id){
			if(confirm("确定删除吗？"))
				location.href="<%= basePath%>/${action}?method=delete&id="+id;
		}
		function dele(id){
			if(confirm("确定要锁定吗？"))
				location.href="<%= basePath%>/${action}?method=locking&id="+id;
		}
		function delet(id){
			if(confirm("确定要解锁吗？"))							
				location.href="<%= basePath%>/${action}?method=delocking&id="+id;
		}
		function view(id){
			location.href="<%= basePath%>/${action}?method=view&id="+id;
		}
    	
    	$(document).ready(function(){
			
			$("ul.nav-tabs li").click(function(){
				var tab = $(this);
				var nav = tab.parent();
				$(nav).children("li").each(function()
				{
					var obj = $(this);
					obj.removeClass("active");
				});
				tab.addClass("active");
			});
			
    	});
    	
   		function ResetForm(){
			$("#myform input[name='parkManager.realName']").val("");
			$("#myform input[name='parkManager.phone']").val("");
			$("#myform select[name='parkManager.status']").val("");
		}
    	
	</script>
	
	<style>
		body{
			margin-left: 10px;
			margin-top: 7px;
			witdth:98%;
			margin-right:20px;
			font-size:10px;
			min-width:550px; 
		}
		.input-group-addon{
			width:58px;
		}
		.form-group .form-control{
			width:150px;
		}
		.user-item{
			border: 1px #eeeeee solid;
			margin:5px;
			padding-top:3px;
		}
		.user-item:hover{
			box-shadow: 3px 3px 1px #B9B9C0;;
		}
	</style>
	
  </head>

<body>
	
	<div class="alert-info hidden">
		<div style="display:inline;margin-left:30px;color:#f00;">${msg}</div>
	</div>
		
	<div>
		<ul class="nav nav-tabs" name="nav-tabs" role="tablist">
			<li class="active" name="list"><a href="javascript:show('list');">列表</a>
			</li>
			<li name="picture"> <a href="javascript:show('imagelist');">图表</a></li>
		</ul>
	</div>
		
	<br />
		
	<div class="content" type="list">
		<!-- 条件查询 -->
	<s:if test="#request.query>0">
		<form id="myform" name="myform" class="form-inline" role="form">
			<div class="">
				<div class="form-group">
					<div class="input-group">
							<div class="input-group-addon" ><span class="glyphicon glyphicon-user"></span>姓名</div>
							<input class="form-control" type="text" style="150px;" placeholder="姓名"
								style="" name="parkManager.realName" value="${parkManager.realName }"/>
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">
							<div class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span>手机号</div>
							<input class="form-control" type="text" style="150px;" placeholder="手机号"
								style="" name="parkManager.phone" value="${parkManager.phone }" />
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">
							<div class="input-group-addon"   ><span class="glyphicon glyphicon-th"></span>用户状态</div>
							<select class="form-control" style="150px;" 	name="parkManager.status">
								<option value="">--用户状态--</option>
								<option value="0">锁定</option>
								<option value="1">正常</option>
							</select>
							<script>
								$("form select[name='parkManager.status']").val("${parkManager.status}");
							</script>
					</div>
				</div>
				
				<div class="form-group">
					<input style="150px;" class="btn " type="submit" value="查询" />
					<input class="btn " type="button" value="重置" onclick="ResetForm()" />
					<s:if test="#request.add>0">
						<a href="${action }?method=add " style="color:#fff;"
							class="btn btn-success "> 添加用户 </a>
					</s:if>
				</div>
				
			</div>
		</form>
</s:if>
		
		<table  id="mytable" class="table  table-hover" style="width:99%;border-radius: 4px;">
			<tr  role="head" >
				<th sort="true" class="hidden" sort="true">id</th>
				<th sort="true" class="hidden-xs" >头像</th>
				<th sort="true" >帐号</th>
				<th sort="true" >用户名</th>
				<th sort="true" >用户角色</th>
				<th sort="true" >手机号</th>
				<th sort="true" class="hidden-xs" style="min-width:200px;" >状态</th>
				<th>操作</th>
			</tr>

			<s:iterator id="l" value="list" status="index">
				<tr  ondblclick="view('${userId}');"  >
					<td class="hidden"><s:property value="#l.userId" />
					</td>
					<td class="hidden-xs" >
						<img class="img-circle" style="width:30px;height:30px;cursor:pointer;"
						src="<s:property value="#l.photo" />"  default="images/user/default.gif"  />
					</td>
					<td><s:property value="#l.userName" /></td>
					<td><s:property value="#l.realName" /></td>
					<td><s:property value="#l.roleName" /></td>
					<td><s:property value="#l.phone" /></td>
					<td class="hidden-xs" ><s:property value="#l.statusName" /></td>
					<td><s:if test="#l.status!=-1">
						
						<s:if test="#request.delete>0">
							<a class="btn btn-danger" href="javascript:del(${userId})"
								title="删除"> <span class="glyphicon glyphicon-trash"></span>
							</a>
						</s:if><s:if test="#request.update>0">
							<a class="btn btn-info"
								href="${action}?method=update&id=${userId}" title="修改"> 
								<span class="glyphicon glyphicon-edit"></span> </a>
						</s:if><s:if test="#request.locking>=0 && status==1">
							<a class="btn btn-primary" href="javascript:dele(${userId})" style="background-color:#CC66FF"
								title="锁定"> <span class="glyphicon glyphicon-lock"></span>
							</a>
						</s:if><s:if test="#request.delocking>=0 && status==0">
							<a class="btn btn-success" href="javascript:delet(${userId})"
								title="解锁"> <span class="glyphicon glyphicon-trash"></span>
							</a>
						</s:if>
						</s:if> <s:if test="#request.view>0">
							<a class="btn btn-primary " href="${action}?method=view&id=${userId}"
								title="查看详情"> <span class="glyphicon glyphicon-list-alt"></span>
							</a>
						
						</s:if> 
						</td>
				</tr>

			</s:iterator>
		</table>
		</div>
	</form>
	
		
	<!-- 头像列表 -->
	<div class="content" type="imagelist" style="display:none;">
		<div class="container-fluid">
			<s:iterator id="l" value="list" status="index">
				<span class="col-xs-2 user-item" style="width:150px;height:200px;" >
					<a href="${action}?method=view&id=${userId}">
						<img class="userphoto img-thumbnail" src="${photo}" default="images/user/default.gif" style="width:120px;height:120px;cursor:pointer;" />
					</a> <br/>
					<span class="nowrap-ellipsis" title="${userName}" style="display:inline-block;width:120px;" >帐号: ${userName} </span> <br/>
					<span class="nowrap-ellipsis" title="${realName}" style="display:inline-block;width:120px;" >姓名: ${realName}</span> <br/>
					<br/>
				</span>
			</s:iterator>
		</div>
	</div><!-- end of 头像列表 -->
	
	<script>
	
			$(document).ready(function(){
				$("#mytable").sorttable({
		            ascImgUrl: "scripts/jquery/tableSorter/images/bullet_arrow_up.png",
		            descImgUrl: "scripts/jquery/tableSorter/images/bullet_arrow_down.png",
		            ascImgSize: "8px",
		            descImgSize: "8px",
		            onSorted: function (cell) {
// 		               alert(cell.index() + " -- " + $.trim(cell.text()));
		            }
		        });
			});
			
			//切换显示方式
			function show(showstyle){
	    		$("div.content").hide();
    			$("div.content[type='"+showstyle+"']").show();
	    	}  	
	</script>
	
	
		
</body>
</html>
